<template>
  <div id="cloudnote"  @click="newdocShow=false;isShow=false;zhaiyao=false;selectedtree=false">
  <!--web页顶部导航栏-->
  <div class="top">
    <div class="topleft">
      <i class="logo"></i>
      <router-link to="/web" >云笔记</router-link>
      <router-link to="/group" >云协作</router-link>
    </div>
    <div class="topright">
      <i class="headpic" @click="dialogFormVisible = true"><img src="../assets/emoji.jpg" alt=""></i>
      <div class="info-more">
      <i class="el-icon-arrow-down drop" title="更多" v-on:click.stop="isShow=!isShow"></i>
      <!--顶部导航栏向下箭头点击出现子菜单-->
      <ul class="widget-menu" v-show="isShow">
        <li class="widget-menu-item" @click="dialogFormVisible = true"><span>个人信息</span></li>
        <li class="widget-menu-item split-line"></li>
        <li class="widget-menu-item acc-set"><span>账号设置</span><i class="el-icon-caret-right"></i>
          <ul class="widget-menu widget-sub-menu"style="top:0">
            <li class="widget-menu-item"><span>账号信息</span></li>
            <li class="widget-menu-item"><span>账号安全</span></li>
            <li class="widget-menu-item"><span>保存邮件到笔记</span></li>
            <li class="widget-menu-item"><span>设置阅读密码</span></li>
            <li class="widget-menu-item"><span>邮件提醒</span></li>
            <li class="widget-menu-item"><span>应用管理</span></li>
          </ul></li>
        <li class="widget-menu-item"><span>导入笔记</span></li>
        <li class="widget-menu-item split-line"></li>
        <li class="widget-menu-item"><span>官方贴吧</span></li>
        <li class="widget-menu-item"><span>帮助</span></li>
        <li class="widget-menu-item"><span>意见反馈</span></li>
        <li class="widget-menu-item"><span>用户满意度调查</span></li>
        <li class="widget-menu-item split-line"></li>
        <li class="widget-menu-item"><span>注销登录</span></li>
      </ul>
      </div>
      <ul class="head_nav">
        <li><router-link to="/">官网</router-link></li>
        <li><a href="">会员</a></li>
        <li><a href="">客户端下载</a></li>
      </ul>
    </div>
  </div>
  <!--底部操作页面-->
  <div class="box" ref="box">
   <!-- 侧边栏-->
    <div class="left" ref="left">
      <div class="hd">
        <div class="create" v-on:click.stop="newdocShow=!newdocShow">
          <svg class="icon xinzeng" aria-hidden="true" font-size="30px">
            <use xlink:href="#icon-xinzeng"></use>
          </svg>
        <span class="content_text">新文档</span>
        <span class="arrow-down"></span>
         <!--左边新建文档点击出现子菜单-->
          <ul class="widget-menu" v-show="newdocShow" >
            <li class="widget-menu-item" @click="add"><span>新建笔记</span></li>
            <li class="widget-menu-item"><span>新建Markdown</span></li>
            <li class="widget-menu-item"><span>新建模板笔记</span></li>
            <li class="widget-menu-item"><span>新建脑图</span></li>
            <li class="widget-menu-item"><span>新建文件夹</span></li>
            <li class="widget-menu-item split-line"></li>
            <li class="widget-menu-item"><span>导入Word</span></li>
            <li class="widget-menu-item split-line"></li>
            <li class="widget-menu-item"><span>上传文件</span></li>
            <li class="widget-menu-item"><span>上传文件夹</span></li>
          </ul>
        </div>
      </div>
      <div class="buttom_left_content">
        <ul class="leftbar">
          <router-link to="/web/newest" exact ><li class="newest"><div><i class="iconfont icon-wendang"></i>{{newest}}</div></li></router-link>
          <router-link to="/web/share" exact><li class="share"><div><i class="iconfont icon-yuwofenxiang"></i>{{share}}</div></li></router-link>
          <li class="mydoc"  @contextmenu.stop.prevent="$refs.share_menu.showMenu($event, data)">
            <i  :class="{'el-icon-arrow-down':docopen,'el-icon-arrow-right':!docopen}" id="docopen" v-on:click.stop="docuopen" v-show="docopen_arrow"></i>
            <router-link to="/web/mydoc" exact><div><i class="iconfont icon-wenjianjia"></i>{{mydoc}}</div></router-link>
          </li>
         <!--v-show的第一个参数控制文件树是否折叠，第二个参数控制文件树的位置是否隐藏，默认为true，不隐藏。当拖拽时视情况将其设为false-->
          <li style="height: 100%" v-show="docopen&&docopen_drag" class="lioftree">
         <!--引入树组件-->
            <div style="margin: 0 auto;">
              <ztree ref="doctree"></ztree>
            </div>
          </li>
          <router-link to="/web/xing" exact><li class="xing" ><div><i class="iconfont icon-xing"></i>{{xing}}</div></li></router-link>
          <router-link to="/web/dustbin" exact><li class="dustbin" @contextmenu.stop.prevent="$refs.dustbin_menu.showMenu($event, data)" ><div><i class="iconfont icon-huishouzhan"></i>{{dustbin}}</div></li></router-link>
        </ul>
        <!-- 回收站右键点击出现菜单-->
        <e-vue-contextmenu  ref="dustbin_menu" class="widget-menu" >
          <li class="widget-menu-item" @click="deleteAllDeleted"><span>清空回收站</span></li>
          <li class="widget-menu-item" @click="recoverAllDeleted"><span>全部恢复</span></li>
        </e-vue-contextmenu>
        <!-- 我的文件夹右键点击出现菜单-->
        <e-vue-contextmenu  ref="share_menu" class="widget-menu">
          <li class="widget-menu-item sharenew" @click="hideMenuShare"><span>新建</span><i class="el-icon-caret-right" style="margin-left: 50px"></i>
            <ul class="widget-menu widget-sub-menu" style="top:0">
              <li class="widget-menu-item" @click="addrootfile"><span>笔记</span></li>
              <li class="widget-menu-item"><span>Markdown</span></li>
              <li class="widget-menu-item"><span>模板笔记</span></li>
              <li class="widget-menu-item"><span>脑图</span></li>
              <li class="widget-menu-item" @click="addrootdoc"><span>文件夹</span></li>
            </ul></li>
          <li class="widget-menu-item shareupload"  @click="hideMenuShare"><span>上传</span><i class="el-icon-caret-right" style="margin-left: 50px"></i>
            <ul class="widget-menu widget-sub-menu">
              <li class="widget-menu-item"><span>文件</span></li>
              <li class="widget-menu-item"><span>文件夹</span></li>
            </ul>
          </li>
        </e-vue-contextmenu>
      </div>
    </div>
    <div class="resize" ref="resize" ><i style="border-right:2px solid #e0e1e5;display: block;width: 50%;height: 100%;float: left"></i></div>
   <div  class="mid" ref="mid">
     <div class="hd mid_tool">
       <i class="iconfont icon-fanhuishangyiji"></i>
       <i class="iconfont icon-fangdajing"></i>
       <div id="search"><el-input v-model="input" placeholder="搜索..." id="input" ></el-input></div>
        <!-- 点击切换摘要列表图标-->
       <i id="liezhai" :class="{'iconfont icon-chuangzuozhongxin_zhaiyao_':iszhaiyao,'iconfont icon-liebiao':!iszhaiyao}"  v-on:click.stop="zhaiyao=!zhaiyao"></i>
       <ul class="widget-menu zhaiyao" v-show="zhaiyao">
<!--  勾随摘要或列表的显示而决定是否显示-->
         <li class="widget-menu-item " @click="iszhaiyao=true"><span>摘要<i :class="{'el-icon-check':iszhaiyao}" style="font-size: 15px;margin-left: 20px;font-weight: bold"></i></span></li>
         <li class="widget-menu-item" @click="iszhaiyao=false"><span>列表<i :class="{'el-icon-check':!iszhaiyao}" style="font-size: 15px;margin-left: 20px;font-weight: bold"></i></span></li>
       </ul>
     </div>
      <!--挂载子路由-->
     <router-view @getnote="getnote" ref="list"></router-view>
   </div>
    <div class="resize2" ref="resize2"><i style="border-right:2px solid #e0e1e5;display: block;width: 50%;height: 100%;float: left"></i></div>
    <div class="right" ref="right">
      <div class="hd">
        <input class="title" type="text" v-model="editor.title" @blur="titleChange">
        <button ref="save" v-on:click="saved">保存</button>
      </div>
      <editor-bar v-model="editor.info" :isClear="isClear" @changetwo="changetwo"></editor-bar>
    </div>
    </div>
<!-- 个人信息弹窗-->
    <el-dialog title="个人信息" :visible.sync="dialogFormVisible" >
      <el-form :model="form">
        <el-form-item label="头像" :label-width="formLabelWidth">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>点击可更换头像 支持jpg 小于2MB
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input v-model="form.nickname" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
        <el-radio-group v-model="form.radio" >
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
          <el-radio :label="0">保密</el-radio>
        </el-radio-group>
        </el-form-item>
        <el-form-item label="地区" :label-width="formLabelWidth">
          <v-distpicker @selected="onSelected" :province="form.province" :city="form.city" :area="form.area"></v-distpicker>
        </el-form-item>
        <el-form-item label="个性签名" :label-width="formLabelWidth">
          <el-input v-model="form.signature"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveUserInfo">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import EditorBar from './compo/wangeditor'//引入富文本编辑器
  import VDistpicker from 'v-distpicker'//引入地址联级选择器
  import ztree from "./ztree";
  import state from '../vuex/store'
  export default {
    name:"cloudnote",
    data(){
      return{
          selectedtree:false,
          docopen_arrow:true,//控制“我的文件夹”这个li的箭头符号是否显示
          docopen_drag:true,//控制文件树随左移动线的拖拽而显隐
          imageUrl: '',
          dialogFormVisible: false,
          iszhaiyao:true,
          input:'',
          editor:{
              noteId:'',
              info:'',
              title:'',
          },
          docopen:true,
        isClear: false,
        newest:"最新文档",
        share:"与我分享",
        mydoc:"我的文件夹",
        xing:"加星文件",
        dustbin:"回收站",
        isShow:false, //右上角菜单是否打开
          newdocShow:false,//新增文档菜单是否打开
          zhaiyao:false,//摘要与列表文档菜单是否打开
        count: 16,
          form: {
              nickname:'',
              name: '',
              region: '',
              date1: '',
              date2: '',
              delivery: false,
              type: [],
              resource: '',
              desc: '',
              signature:'',
              radio: 1,
              userId:'',
              province:'',
              city:'',
              area:''
          },
          formLabelWidth: '120px'
      }
    },
    mounted () {
        var _this=this;
      _this.dragControllerDiv();
      _this.getform();
    },
    methods: {
      dragControllerDiv: function () {
        var _this=this;
        var resize = document.getElementsByClassName('resize');
        var resize2 = document.getElementsByClassName('resize2');
        var left = document.getElementsByClassName('left');
        var right = document.getElementsByClassName('right');
        var mid = document.getElementsByClassName('mid');
        var box = document.getElementsByClassName('box');
        for (let i = 0; i < resize.length; i++) {
          resize[i].onmousedown = function (e) {
            var startX = e.clientX;
            resize[i].left = resize[i].offsetLeft;
            document.onmousemove = function (e) {
              var endX = e.clientX;
              var rightW = right[i].offsetWidth;
              var moveLen = resize[i].left + (endX - startX);//左线移动后距离左网页边的长度
              var maxT = box[i].clientWidth - resize[i].offsetWidth;
              if (moveLen < 80) moveLen = 80;
              if (moveLen > maxT - rightW - 80) moveLen = maxT - rightW - 80;
              resize[i].style.left = moveLen;
              for (let j = 0; j < left.length; j++) {
                left[j].style.width = moveLen + 'px';
                mid[j].style.width = (box[j].clientWidth - moveLen - rightW - 10) + 'px';
                right[j].style.width=rightW+'px';
              }
              if(left[0].style.width==(80+"px")){
                _this.change("lala");
              }
              else {
                _this.back();
              }
            }
            document.onmouseup = function (evt) {
              document.onmousemove = null;
              document.onmouseup = null;
              resize[i].releaseCapture && resize[i].releaseCapture();
            }
            resize.setCapture && resize.setCapture();
            return false;
          }
        }
        for (let i = 0; i < resize2.length; i++) {
          resize2[i].onmousedown = function (e) {
            var startX = e.clientX;
            resize2[i].left = resize2[i].offsetLeft;
            document.onmousemove = function (e) {
              var endX = e.clientX;
              var leftW = left[i].offsetWidth;
              var moveLen = resize2[i].left + (endX - startX) - leftW;
              var maxT = box[i].clientWidth - resize2[i].offsetWidth - 5;
              if (moveLen < 295) moveLen = 295;
              if (moveLen > maxT - leftW - 295) moveLen = maxT - leftW - 295;
              resize2[i].style.left = moveLen;
              for (let j = 0; j < right.length; j++) {
                mid[j].style.width = moveLen + 'px';
                right[j].style.width = (box[j].clientWidth - moveLen - leftW - 10) + 'px';
                left[j].style.width=leftW+'px';
              }
            }
            document.onmouseup = function (evt) {
              document.onmousemove = null;
              document.onmouseup = null;
              resize2[i].releaseCapture && resize2[i].releaseCapture();
            }
            resize2.setCapture && resize2.setCapture();
            return false;
          }
        }
      },
      change: function(val) {
        var _this=this;
        _this.newest="";
        _this.share="";
        _this.mydoc ="";
        _this.xing  ="";
        _this. dustbin ="";
        _this.docopen_drag=false;//文件树隐藏（这个隐藏只是文件树位置的隐藏，不影响原来的开合状态
        _this.docopen_arrow=false;//“我的文件夹”li的箭头消失
      },
      back:function (val) {
        var _this=this;
        _this.newest="最新文档";
       _this.share="与我分享";
       _this.mydoc="我的文件夹";
       _this.xing="加星文件";
       _this.dustbin="回收站";
       _this.docopen_drag=true;//文件树出现（这个出现只是文件树位置的出现，不影响原来的开合状态
       _this.docopen_arrow=true;//“我的文件夹”li的箭头出现
      },
      saved:function () {
        var _this=this;
          _this.$axios.put('/note/updateContent',{
              noteId:_this.editor.noteId,
              content:_this.editor.info,
              noteTitle:_this.editor.title,
              // createTime:new Date().getTime()
          }).then(function (res) {
              _this.$refs.list.getnotelist();
              _this.$refs.doctree.refreshTree();
              console.log(res);
          }).catch(function (err) {
              console.log(err);
          })
        _this.$refs.save.textContent="已保存";
        setTimeout(function () {
          _this.$refs.save.textContent="保存";
        },1000);
      },
      load () {
        this.count += 2
      },
        tosub(val) {
        this.$router.push("/web/"+val);
        },
        changetwo(val){
            this.editor.info=val;
        },
        hideMenuDustbin() {
            this.$refs.dustbin_menu.hideMenu(); // 隐藏回收站菜单
        },
        hideMenuShare() {
            this.$refs.share_menu.hideMenu(); // 隐藏回收站菜单
        },
        //触发地区选择
        onSelected(data) {
            this.form.province=data.province.value;
            this.form.city=data.city.value;
            this.form.area=data.area.value;
        },
        //图像上传操作
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        docuopen(){
          this.docopen=!this.docopen;
        },
        addrootdoc(){
               this.$refs.doctree.add(1,0);
        },
        addrootfile(){
          this.$refs.doctree.add(0,0);
        },
        saveUserInfo(){
            var myDate=new Date();
            var _this=this;
            console.log(this.imageUrl);
            _this.$axios.put('/user/update',
                {
                  credentials: true,
                  userId:_this.form.userId, //发送用户输入的新地址到后端
                  createTime:myDate,
                  nickname: _this.form.nickname,
                  sex:_this.form.radio,
                  avatar:_this.imageUrl,
                  signature:_this.form.signature,
                    province:_this.form.province,
                    city:_this.form.city,
                    area:_this.form.area,
              }
          ).then(function (res) {
              if(res.data.code==200){
                  _this.getform();
                  _this.dialogFormVisible=false;
              }
          }).catch(function (err) {
              console.log(err);
          });
        },
        //从newest拿来内容并渲染到编辑框和标题栏
        getnote(val){
          this.editor.title=val.title;
          this.editor.info=val.detail;
          this.editor.noteId=val.noteId;
            console.log(this.editor);
        },
        getform(){
          var _this=this;
            this.$axios.get('/user/view',{
                params:{}
            }).then(function(response){
                    console.log(response);
                    var getform=response.data.data.data;
                    console.log(getform);
                    _this.form.nickname=getform.nickname;
                    _this.form.userId=getform.userId;
                    _this.form.radio=getform.sex;
                    _this.form.signature=getform.signature;
                    _this.form.province=getform.province;
                    _this.form.city=getform.city;
                    _this.form.area=getform.area;
                // _this.imageUrl=getform.avatar;
                }
            ).catch(function (error) {
                    console.log(error);
                }
            );
        },
        add(node){//新建笔记
           var _this=this;
           //清空标题和内容框
           _this.editor.title="无标题笔记",
           _this.editor.info='',
               _this.$axios.post('/note/add',{
                   content:_this.editor.info,
                   noteTitle:"无标题笔记",
               }).then(function (res) {
                   console.log(res);
                   console.log(res.data.data.noteId);
                   _this.$refs.list.getnotelist();//刷新note列表
               }).catch(function (err) {
                   console.log(err);
               })
        },
        titleChange(){//当鼠标点击别处
          var _this=this;
               if(_this.editor.title==""){
                _this.editor.title="无标题笔记"
               }
               _this.saved();//进行保存

        },
        recoverAllDeleted(){
          var _this=this;
          this.$axios.post('/note/recoverAllDeleted',{
              params:{}
          }).then(function (res) {
              if(res.data.code==200){
                  _this.$refs.list.getnotelist();
                  _this.hideMenuDustbin();
              }
          }).catch(function (err) {
              console.log(err);
          })
        },
        deleteAllDeleted(){
          var _this=this;
          this.$axios.delete('note/deleteAllDeleted',{
            params:{}
          }).then(function (res) {
              if(res.data.code==200){
                  _this.$refs.list.getnotelist();
                  _this.hideMenuDustbin();
              }
          }).catch(function (err) {
              console.log(err);
          })
        }
    },
      // watch:{
      //   'editor.title'(newValue, oldValue) {//监听title的变化
      //       if(newValue=='')//若title为空
      //       {
      //
      //           this.editor.title="无标题笔记"//为其赋值
      //       }
      //   }
      // },
    components: { EditorBar,VDistpicker,ztree},
  }

</script>

<style scoped>
  /*顶部区域*/
  .top{
    position: fixed;
    width: 100%;
    height: 50px;
    z-index: 999;
    background: #398dee;
    min-width: 810px;
    top: 0;
    left: 0;
  }
 .topleft{
   width: 100%;
   height: 100%;
   top:0;
   left: 20px;
   position: absolute;
   background: #398dee;
 }
  .topright{
    position: relative;
    float: right;
    height: 100%;
    width: 308px;
    background: #398dee;
    margin-right: 10px;
  }
  .logo{
    position: relative;
    top:10px;
    display: inline-block;
    width: 143px;
    height: 27px;
    background: url("../assets/sprite-e2e8774953.svg") 0 0 no-repeat;
    float: left;
    margin-right: 50px;
  }
 .top a{
    display: inline-block;
    height: 100%;
    width:76px;
    float: left;
  background: #398dee;
  line-height: 50px;
  font-size: 15px;
  color: white;
  opacity: 0.5;
}
  .topleft .router-link-active{
    opacity: 1;
    background: #3178cb;
  }
  .info-more{
    display: inline-block;
    height: 100%;
    width: 5px;
  }
.drop {
  background: #398dee;
  cursor: pointer;
  position: absolute;
  /*top: 45%;*/
  height: 100%;
  line-height: 50px;
  left: 70px;
  color:white;
}
  .head_nav{
    float: right;
  }
  .head_nav li{
    float: left;

  }
  .head_nav>li a{
    font-size: 10px;
    color: white;
    opacity: 0.8;
  }
  .headpic{
    width: 54px;
    height: 50px;
    cursor: pointer;
  }
  .headpic img{
    width: 38px;
    height: 38px;
    margin:6px 8px;
    border-radius: 50%;
  }
  /*底部区域*/
  .box{
    height: 800px;
    width: 100%;
    margin-top:-10px ;
    overflow: hidden;
  }
.hd{
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px #FFFFFF;
  height: 70px;
  line-height: 70px;
  width: 100%;
  box-sizing:border-box;
}
.create:hover{
 cursor: pointer;
}
  .create:hover>span:first-of-type{
    color: #2da1f8;
  }
.content_text{
  font-size: 12px;
  color:#393939 ;
  width: 36px;
  height: 40px;
}
.xinzeng{
  position: relative;
  top: 6px;
}

  .arrow-down{
    position: relative;
    top: 12px;
    left: 2px;
    width: 6px;
    height: 5px;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4.5px solid #959fb1;

  }
  .left{
    width:10%;
    height:100%;
    background: #f5f5f5;
    float:left;
    min-width: 80px;
  }
 .mid{
    float:left;
    width:16%;
    height:100%;
  }
  .right{
    float:left;
    width: calc(74% - 10px);
    height:100%;
  }
  .right .hd{
    padding: 0 20px;
  }
  .right .hd input{
    height: 30px;
    font-size: 18px;
    width: 80%;
    border: none;
    outline: none;
    display: inline-block;
    float: left;
    position: relative;
    top: 20px;
    left: 0;
  }
  .right .hd button{
    display: inline-block;
    background: transparent;
    color: rgba(45,161,248,0.8);
    font-size: 15px;
    border-radius: 5px;
    border:rgba(153,153,153,0.5) 1px solid;
    outline: none;
    width: 82px;
    height: 32px;
    cursor: pointer;
  }
  .right .hd button:hover{
    color: rgba(45,161,248,1);
    border:rgba(153,153,153,1) 1px solid;
  }
 .resize{
    width:5px;
    height:100%;
    cursor: w-resize;
    float:left;
   background: white;
  }
  .resize2{
    width:5px;
    height:100%;
    cursor: w-resize;
    float:left;
    background: white;
  }
  .leftbar{
    display: block;
    width: 100%;
  }
  .leftbar li{
    display: block;
    height: 50px;
    line-height: 50px;
    width: 100%;
    float: left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis !important;
  }
  .leftbar li:hover{
    background: #e4edf8;
    cursor: pointer;
  }
  .leftbar li:nth-child(4):hover{
    background: #f5f5f5;
  }
  .leftbar li i{
    font-size: 25px;
    display: inline-block;
   margin:0 10px;
    /*float: left;*/
  }
  .leftbar li div {
    display: inline-block;
    margin: 0 10px;
    /*width: 40%;*/
  }
  /*中间部分*/
  .mid_tool{
    width: 100%;
    display: flex;
    padding: 0 20%;
  }
  .mid_tool i{
    font-size: 20px;
    margin: 0 auto;
  }

  #search{
    display: inline-block;
    margin-right: 10px;
  }
  #search #input{
    width: 100%;
  }
  .icon-chuangzuozhongxin_zhaiyao_:hover,.icon-liebiao:hover{
    color: #2da1f8;
    cursor: pointer;
  }
  /*导航栏菜单*/
  /*右上角子菜单*/
  .widget-menu{
    display: inline-block;
    width: 125px ;
    background: #ffffff;
    z-index: 1000;
    position: absolute;
    left: 25px;
    top: 50px;
    box-shadow: 0px 1px 16px 0 rgba(90, 109, 122, 0.41);
    padding: 0;
    border-radius: 0;
  }
  .zhaiyao{
    left: 210px;
    top: 60px;
  }
  /*新增文件子菜单*/

  .widget-menu .widget-menu-item{
    display: inline-block;
    float: left;
    width: 100%;
    cursor: pointer;
    height: 30px;
    color: #999;
    font-size: 12px;

  }
  .widget-menu .widget-menu-item span{
    display: inline-block;
    float: left;
    position: relative;
    top: 25%;
    margin-left: 20px;
    /*覆写行高以避免继承父元素行高*/
    line-height: 100%;
  }
  .widget-menu .widget-menu-item:hover{
    background: #ebf3fd;
    color: #7ab2f3;
  }
  .el-icon-caret-right{
    position: relative;
    top: 22%;
    color: #999999 !important;
  }
  .split-line{
    height: 0 !important;
    border-bottom:#ebf3fd solid 1px;
  }
  /*导航栏子菜单*/
  .widget-sub-menu{
    position: absolute;
    left: 121px;
    top:31px;
    display: none;
  }
  .widget-sub-menu li span{
    display: inline-block;
    float: left;
    position: relative;
    top: 25%;
    margin-left: 20px;
  }
  .acc-set:hover .widget-sub-menu{
    display: inline-block;
  }
  .sharenew:hover .widget-sub-menu{
    display: inline-block;
  }
  .shareupload:hover .widget-sub-menu{
    display: inline-block;
  }

  .router-link-exact-active li{
    background: #398dee;
    color: #ffffff;
  }
  .router-link-exact-active li:hover{
    background: #398dee;
    color: #ffffff;
  }

/*头像上传*/
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  #docopen{
    font-size: 15px;
    /*这行代码别删，否则“我的文件”这个li里的内容将不能和其它li样式对齐，具体原因暂时不明*/
    margin: 0 auto;
  }
</style>
